import { BasicColumn, FormSchema } from '@/components/Table';
import { h } from 'vue';
import Icon from '@/components/Icon/Icon.vue';

export const columns: BasicColumn[] = [
  {
    title: '菜单名称',
    dataIndex: 'name',
    width: 150,
    align: 'center',
    resizable: true,
  },
  // {
  //   title: '归属机构',
  //   width: 150,
  //   dataIndex: 'organizationName',
  //   resizable: true,
  // },
  {
    title: '图标',
    dataIndex: 'icon',
    width: 50,
    resizable: true,
    customRender: ({ record }) => {
      return h(Icon, { icon: record.icon });
    },
  },
  {
    title: '组件',
    dataIndex: 'component',
    align: 'center',
    width: 150,
    resizable: true,
  },
  {
    title: '路径',
    dataIndex: 'url',
    align: 'center',
    width: 150,
    resizable: true,
  },
  {
    title: '排序',
    dataIndex: 'sortNo',
    width: 50,
  },
];

const isMenu = (type: number) => type === 0;
const isButton = (type: number) => type === 2;

export const searchFormSchema: FormSchema[] = [
  {
    field: 'Keyword',
    label: '关键字',
    component: 'Input',
    colProps: { span: 7 },
    componentProps: {
      placeholder: '请输入菜单名称/编号',
    },
  },
];

export const formSchema: FormSchema[] = [
  {
    label: 'id',
    field: 'id',
    component: 'Input',
    show: false,
  },
  {
    field: 'menuType',
    label: '菜单类型',
    component: 'RadioButtonGroup',
    defaultValue: 1,
    componentProps: {
      options: [
        { label: '菜单', value: 0 },
        { label: '按钮', value: 2 },
      ],
    },
    colProps: { lg: 24, md: 24 },
  },
  {
    field: 'name',
    label: '菜单名称',
    component: 'Input',
    required: true,
  },
  {
    field: 'parentId',
    label: '上级菜单',
    component: 'TreeSelect',
    required: true,
    defaultValue: '0',
    componentProps: {
      fieldNames: { children: 'children', label: 'name', value: 'id' },
      dropdownStyle: {
        maxHeight: '50vh',
      },
      getPopupContainer: (node) => node.parentNode,
    },
  },
  {
    field: 'sortNo',
    label: '排序',
    component: 'InputNumber',
    required: true,
  },
  {
    field: 'icon',
    label: '图标',
    component: 'IconPicker',
    ifShow: ({ values }) => !isButton(values.menuType),
  },

  {
    field: 'url',
    label: '路由地址',
    component: 'Input',
    required: true,
    ifShow: ({ values }) => !isButton(values.menuType),
  },
  {
    field: 'component',
    label: '组件路径',
    component: 'Input',
    ifShow: ({ values }) => !isButton(values.menuType),
  },
  {
    field: 'perms',
    label: '权限标识',
    component: 'Input',
    ifShow: ({ values }) => isButton(values.menuType),
  },
  {
    field: 'status',
    label: '状态',
    component: 'RadioButtonGroup',
    defaultValue: true,
    componentProps: {
      options: [
        { label: '启用', value: true },
        { label: '禁用', value: false },
      ],
    },
  },
  {
    field: 'route',
    label: '是否路由菜单',
    component: 'RadioButtonGroup',
    defaultValue: false,
    componentProps: {
      options: [
        { label: '否', value: false },
        { label: '是', value: true },
      ],
    },
    ifShow: ({ values }) => !isButton(values.menuType),
  },

  {
    field: 'keepAlive',
    label: '是否缓存',
    component: 'RadioButtonGroup',
    defaultValue: false,
    componentProps: {
      options: [
        { label: '否', value: false },
        { label: '是', value: true },
      ],
    },
    ifShow: ({ values }) => isMenu(values.menuType),
  },

  {
    field: 'hidden',
    label: '是否显示',
    component: 'RadioButtonGroup',
    defaultValue: false,
    componentProps: {
      options: [
        { label: '否', value: false },
        { label: '是', value: true },
      ],
    },
    ifShow: ({ values }) => !isButton(values.menuType),
  },
  // {
	// 	field: 'internalOrExternal',
	// 	label: '打开方式',
	// 	component: 'Switch',
	// 	defaultValue: false,
	// 	componentProps: {
	// 		checkedChildren: '外部',
	// 		unCheckedChildren: '内部',
	// 	},
	// 	ifShow: ({ values }) => !isButton(values.menuType),
	// },
];
